<template>

  <el-dialog
     title="流程列表" :visible.sync="dialogStatus" width="50%"    :modal-append-to-body="false">
    <div v-show="myLoading" class="el-loading-spinner"><i class="el-icon-loading"></i><p class="el-loading-text">拼命加载中</p></div>
    <el-timeline>
      <el-timeline-item v-if="userNodeInfo"
        placement="top"
        v-for="(activity, index) in userNodeInfo"
        :key="index"
        :icon="activity.icon"
        :type="activity.type"
        :color="activity.color"
        :size="activity.size"
        :timestamp="activity.timestamp"
      >
        <!-- v-if="activity.nodeId !='end_node'" -->
        <el-card >
          <h4 v-if="activity.success==1" style="color:#18b374">{{activity.content}}</h4>
          <h4 v-else-if="activity.success==2" style="color:red">{{activity.content}}</h4>
          <h4 v-else>{{activity.content}}</h4>
          <p>{{activity.content2}}</p>
        </el-card>

      </el-timeline-item>
    </el-timeline>

  </el-dialog>
</template>
<script>

  import {fetchGet} from '@/api/common'
  import {disableBtn,ERRS, SUCS} from '@/utils'
  export default {
    name: 'flowShow',
    props: {},
    data:function () {
      return {
        dialogStatus:false,
        myLoading:false,
        //审核信息
        userNodeInfo:{},
        companyId:'',
        temp: {},
        selectUserAllot :[],
        activities2: [{
          content: '支持使用图标',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          // icon: 'el-icon-more'
          icon: 'el-icon-circle-check-outline'
        }, {
          content: '支持自定义颜色',
          timestamp: '2018-04-03 20:46',
          // color: '#0bbd87',
          type: 'primary',
          size: 'large',
          icon: 'el-icon-circle-check-outline'
        }, {
          content: '支持自定义尺寸',
          timestamp: '2018-04-03 20:46',
          size: 'large',
          // type: 'danger',
          type: 'success',
          // icon: 'el-icon-loading'
          icon: 'el-icon-time'
        }, {
          content: '支持自定义尺寸',
          timestamp: '2018-04-03 20:46',
          size: 'large',
          type: 'danger',
          // icon: 'el-icon-circle-close'
          icon: 'el-icon-circle-close-outline'
        }, {
          content: '默认样式的节点',
          timestamp: '2018-04-03 20:46',
          size: 'large',
          type: 'text',
          icon: 'el-icon-circle-check-outline'
        }]
      }
    },
    watch:{

    },
    methods: {
      //编辑row 请求节点信息
      getNodeInfo(row){
        this.dialogStatus = true
        this.myLoading=true;
        this.userNodeInfo=[]
        // console.log(row)
/*
let data=eval('('+dat+')');
console.log(data);
        this.dialogStatus = true
return;*/
        //审核节点
        // fetchGet(`flowable/ru/${row.groupId}/${row.nodeId}/nodeOpuserAll`).then(res => {
        fetchGet(`flowable/ru/taskInfo?opGroupId=${row.opGroupId }`).then(res => {
          if (res.code == 0) {
            let dat = res.data
              this.userNodeInfo=dat.map((v)=>{
                let task=v.taskOpHiList

                this.$set(v,'size','large')
                if(v.nodeId===this.GLB.start_node){ //发起
                  this.$set(v,'content',task[0].operatorName+'  '+v.nodeName)
                  this.$set(v,'content2',task[0].operatorName+' 提交于 '+task[0].opTime)
                  this.$set(v,'timestamp',task[0].opTime)
                  this.$set(v,'type','primary') //color
                  this.$set(v,'icon','el-icon-circle-check-outline')
                }else if(v.nodeId===this.GLB.user_node){  //审核

                  if(task){
                    //已审
                    this.$set(v,'content',task[0].operatorName+'  '+v.nodeName)
                    this.$set(v,'content2',task[0].operatorName+' 提交于 '+task[0].opTime)
                    this.$set(v,'timestamp',task[0].opTime)

                    let audit = v.hiParams.audit //1通过 0不通过
                    if(audit){  //通过
                      this.$set(v,'type','primary') //color
                      this.$set(v,'icon','el-icon-circle-check-outline')
                    }else{   //不通过
                      this.$set(v,'type','danger') //color
                      this.$set(v,'icon','el-icon-circle-close-outline')
                    }
                  }else{
                    //待审
                    this.$set(v,'content','待处理')
                    this.$set(v,'timestamp','todo')
                    this.$set(v,'type','success') //color
                    this.$set(v,'icon','el-icon-time')
                  }
                }else if(v.nodeId===this.GLB.end_node) {
                  if(task){ //结束
                    let audit = v.hiParams.audit //1通过 0不通过
                    if(audit) {  //通过
                      this.$set(v,'content','任务完成')
                      this.$set(v,'timestamp',task[0].opTime)
                      this.$set(v,'type','primary') //color
                      this.$set(v,'icon','el-icon-circle-check-outline')
                      this.$set(v,'success',1)
                    }else{
                      this.$set(v,'content','审批未通过')
                      this.$set(v,'timestamp',task[0].opTime)
                      this.$set(v,'type','text') //color
                      this.$set(v,'icon','el-icon-circle-close-outline')
                      this.$set(v,'success',2)
                    }
                    this.$set(v,'content2','流程结束!')
                  }else{  //待审
                    //待审
                    this.$set(v,'content','待处理')
                    this.$set(v,'timestamp','todo')
                    this.$set(v,'type','info') //color
                    this.$set(v,'icon','el-icon-circle-check-outline')
                    this.$set(v,'content2','')
                  }
                }

                this.myLoading=false;
                return v

              });
          } else {
            ERRS(res.message)
          }
        })
      },


      insertWord(data,Type){
        this.selectUserAllot=data.map((v)=>{
          if(Type=='USER')
            this.$set(v,'allotName',v.username)
          else if(Type=='DEPARTMENT')
            this.$set(v,'allotName',v.departmentName)
          else if(Type=='POSITION')
            this.$set(v,'allotName',v.positionName)
          return v
        })
        console.log(111,this.selectUserAllot)
      },

    }
  }
</script>
<style>
  .flowdiv{
    border-top: 1px dotted;
    margin-top: 3vh;
    padding-top: 3vh;
  }
  .el-dialog {
    min-height: 40%;
  }
  .el-timeline-item__node--large {
    left: -7px;
    top: -4px;
    width: 24px;
    height: 24px;
  }
  .el-timeline-item__icon {
    font-size: 24px;
  }
  .el-card__body {
    padding: 10px 20px;
  }
  .el-dialog__title {
    color: #595c63;
    font-weight: bolder;
  }
</style>

